<template>
  <div class="mineinfo-container">
    <div class="purse-container">
      <div class="title">
        <span>我的钱包</span>
        <i class="el-icon-view" @click="balanceShow = !balanceShow"></i>
      </div>
      <div class="balance-ul">
        <div class="balance-li" v-for="(item, index) in 1" :key="index">
          <div class="balance-li-title">我的余额</div>
          <div
            class="balance-li-num"
            v-show="purse.payId == null ? false : true"
          >
            {{ balanceShow == true ? "￥" + purse.balance : "****" }}
          </div>
          <div
            class="balance-li-num"
            v-show="purse.payId == null ? true : false"
          >
            <button
              class="bg-font-color text-white px-4 rounded-xl"
              @click="toPay"
            >
              开通钱包
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="nft-container">
      <div class="nft-container-title">
        <span>我的藏品</span>
        <span class="find" @click="toMyNft"
          >查看更多
          <i class="el-icon-d-arrow-right"></i>
        </span>
      </div>
      <div v-show="isNull">
        <el-empty description="暂无数据"></el-empty>
      </div>
      <div class="nft-swiper" v-show="!isNull">
        <swiper class="swiper-wrapper" ref="mySwiper" :options="swiperOptions">
          <swiper-slide
            class="swiper-slide"
            v-for="(item, index) in imgList"
            :key="index"
          >
            <el-image
              class="swiper-img"
              :src="imgList[index].url"
              :fit="'cover'"
            >
            </el-image>
          </swiper-slide>
        </swiper>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      isNull:true,
      imgList: [{ url: "" }],
      purse: {
        payId: null,
        balance: null,
      },
      balanceShow: false,
      swiperOptions: {
        slidesPerView: 2,
        // spaceBetween: 30,
        centeredSlides: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  methods: {
    toMine() {},
    toMyNft() {
      this.$router.push("/mine/mynft").catch((err) => {
        console.log();
      });
    },
    getitems() {
      this.$taxios
        .postInfo("/myItems")
        .then((res) => {
          this.imgList = [...res.items];
          if(this.imgList.length>0){
            this.isNull=false
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getPurse() {
      this.$taxios
        .postInfo("/getPurse")
        .then((res) => {
          let state = res.state;
          if (state == 1) {
            this.purse = res.purse;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    toPay() {
      this.$router.push("/mine/paymant");
    },
  },
  mounted() {},
  created() {
    if (sessionStorage.getItem("token")) {
      this.getitems();
      this.getPurse();
    }
  },
};
</script>
<style  lang="less" scoped>
.mineinfo-container {
  width: 100%;
  max-width: 1200px;

  .purse-container {
    position: relative;
    width: 90%;
    left: 10%;
    // height: 200px;
    // background: pink;
    padding: 10px 0px 20px 0px;
    background: #fff;
    box-shadow: 0 2px 16px 0 hsl(0deg 0% 71% / 40%);
    border-radius: 4px;
    padding: 0 32px;
    box-sizing: border-box;
    margin-bottom: 37px;

    .title {
      position: relative;
      width: 100%;
      height: 50px;
      line-height: 100%;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(128, 128, 128, 0.503);

      .el-icon-view {
        cursor: pointer;
      }
    }

    .balance-ul {
      position: relative;
      width: 100%;
      margin-top: 15px;

      // height: 150px;
      background: #fff;
      display: flex;
      align-items: center;

      .balance-li {
        width: 25%;
        text-align: left;
        padding: 10px 0px 10px 10px;
        box-sizing: border-box;

        .balance-li-title {
          padding: 10px 0px 10px 10px;
          box-sizing: border-box;

          color: rgba(128, 128, 128, 0.69);
        }

        .balance-li-num {
          padding: 5px 0px 10px 10px;
          box-sizing: border-box;
        }
      }
    }
  }

  .nft-container {
    position: relative;
    width: 90%;
    left: 10%;

    // height: 200px;
    // background: pink;
    padding: 10px 0px 20px 0px;
    background: #fff;
    box-shadow: 0 2px 16px 0 hsl(0deg 0% 71% / 40%);
    border-radius: 4px;
    padding: 0 12px;
    box-sizing: border-box;
    margin-bottom: 37px;

    .nft-container-title {
      position: relative;
      width: 100%;
      height: 50px;
      line-height: 100%;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(128, 128, 128, 0.503);
      color: rgba(128, 128, 128, 0.69);

      .find {
        padding-right: 10px;
        box-sizing: border-box;
        cursor: pointer;
      }
    }

    .nft-swiper {
      position: relative;
      width: 100%;
      height: 400px;
      margin-top: 20px;
      padding-bottom: 20px;
      padding: 10 10px;
      box-sizing: border-boxs;

      .swiper-wrapper {
        width: 90%;
        height: 100%;

        .swiper-slide {
          transform: scale(0.8);
          transition: 0.5s;
        }

        .swiper-slide-active,
        .swiper-slide-duplicate-active {
          transform: scale(1);
        }

        .swiper-slide .swiper-img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
</style>